<template>
  <div class="modal-temp">
    <div>
      <div class="show-modal-button" @click="showModal">
        <slot name="btn"></slot>
      </div>
      <a-modal v-model="visible" :title="modalName" @ok="handleOk" @cancel="handleCancel">
        <slot name="content"></slot>
      </a-modal>
    </div>
  </div>
</template>

<script>
export default {
  name: "ModalTemp",
  props: {
    modalName: {
      type: String,
      default: 'Modal'
    }
  },
  data() {
    return {
      visible: false,
    };
  },
  computed: {

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.$emit('confirm');
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.modal-temp {
  
}
</style>
